<!--
 * @Author: angelWife zzwchilong@163.com
 * @Date: 2024-03-28 22:57:19
 * @LastEditors: angelWife zzwchilong@163.com
 * @LastEditTime: 2024-03-30 00:19:15
 * @FilePath: \steel-cloud-static\static\company\html\demo\saleShop.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../../plugin/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="../../plugin/layui/css/layui.css" />
    <link rel="stylesheet" href="../../plugin/swiper/swiper.min.css" />
    <link rel="stylesheet" href="../../css/common.css" />
    <link rel="stylesheet" href="../../css/style.css" />
    <link rel="stylesheet" href="../../css/animate.css" />
    <link rel="stylesheet" href="../../css/fonts/iconfont.css" />
    <link rel="stylesheet" href="../../plugin/summernote/summernote.css" />
    <link rel="stylesheet" href="../../plugin/zTree/css/zTreeStyle.css" />

    <script type="text/javascript" src="../../js/jquery.js"></script>
    <script type="text/javascript" src="../../plugin/layui/layui.js"></script>
    <script type="text/javascript" src="../../js/common.js"></script>
    <script type="text/javascript" src="../../js/echarts.min.js"></script>
    <script type="text/javascript" src="../../js/menu.js"></script>
    <script
      type="text/javascript"
      src="../../plugin/swiper/swiper.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../../plugin/bootstrap/js/bootstrap.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../../plugin/summernote/summernote.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../../plugin/zTree/js/jquery.ztree.all.min.js"
    ></script>
    <style>
      .tackPieBox {
        height: 300px;
      }
    </style>
  </head>
  <body class="child_body">
    <div class="common_modal">
      <div class="com_title flex items-center justify-between">
        <div class="title_text">电商销售追踪</div>
        <div class="formItem flex m-b-0 line28">
          <label class="form-label w150">日期区间</label>
          <div class="flex-1 widthHalf flex items-center" id="dateRangePicker">
            <input
              class="flex-1 form-control"
              id="startTime"
              placeholder="起始时间"
            />
            <span class="p-l-r-5">至</span>
            <input
              class="flex-1 form-control"
              id="endTime"
              placeholder="结束时间"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="common_modal m-t-15">
      <div class="common_title flex items-center justify-between">
        <div class="title_text">订单</div>
        <a class=""> <i class="iconfont icon-import"></i>下载数据 </a>
      </div>
      <div class="flex trackOrder">
        <div class="flex-1">
          <div class="flex items-center">
            <div class="iconbox blue"><i class="iconfont icon-xitong"></i></div>
            <div>
              <div class="c999">全部</div>
              <div><span class="fs20">0</span>吨</div>
            </div>
          </div>
        </div>
        <div class="flex-1">
          <div class="flex items-center">
            <div class="iconbox green">
              <i class="iconfont icon-chengjiao"></i>
            </div>
            <div>
              <div class="c999">成交</div>
              <div><span class="fs20">0</span>吨</div>
            </div>
          </div>
        </div>
        <div class="flex-1">
          <div class="flex items-center">
            <div class="iconbox bluelight">
              <i class="iconfont icon-yishengxiao"></i>
            </div>
            <div>
              <div class="c999">已生效</div>
              <div><span class="fs20">0</span>吨</div>
            </div>
          </div>
        </div>
        <div class="flex-1">
          <div class="flex items-center">
            <div class="iconbox yello">
              <i class="iconfont icon-weishengxiao"></i>
            </div>
            <div>
              <div class="c999">未生效</div>
              <div><span class="fs20">0</span>吨</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="m-t-15 flex">
      <div class="flex-1 widthHalf common_modal m-r-15">
        <div class="common_title flex items-center justify-between">
          <div class="title_text">发货</div>
          <a class=""> <i class="iconfont icon-import"></i>下载数据 </a>
        </div>
        <div class="tackPieBox" id="sendGoodsPie"></div>
      </div>
      <div class="flex-1 widthHalf common_modal">
        <div class="common_title flex items-center justify-between">
          <div class="title_text">发票</div>
          <a class=""> <i class="iconfont icon-import"></i>下载数据 </a>
        </div>
        <div class="tackPieBox" id="invoicePie"></div>
      </div>
    </div>
  </body>
  <script>
    $(function () {
      var datePicker1 = $("#datetimepicker").initDatePicker({ type: "date" });
      var datePicker2 = $("#dateRangePicker").initDatePicker({
        type: "datetime",
        range: ["#startTime", "#endTime"],
      });
      initPie();
      initPie2();
    });
    function initPie() {
      var chartDom = document.getElementById("sendGoodsPie");
      var myChart = echarts.init(chartDom);
      var option = {
        title: {
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
          show: false,
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          right: "right",
          top: "center",
        },
        series: [
          {
            name: "发货",
            type: "pie",
            radius: "70%",
            data: [
              { value: 1048, name: "已交割" },
              { value: 735, name: "未交割" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    }
    function initPie2() {
      var chartDom = document.getElementById("invoicePie");
      var myChart = echarts.init(chartDom);
      var option = {
        title: {
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
          show: false,
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          right: "right",
          top: "center",
        },
        series: [
          {
            name: "应开量",
            type: "pie",
            radius: ["40%", "70%"],
            data: [
              { value: 1048, name: "已开量" },
              { value: 735, name: "未开量" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    }
  </script>
</html>
